<template>
  <div class="valuable-main">
    <!-- 头部bar -->
    <div class="valuable-header">
      <div class="h-bar">
        <div class="t-bar">
          <!-- 头部导航 -->
          <van-nav-bar title="值得买">
            <!-- 左边图标 -->
            <template #left>
              <van-icon name="wap-home-o" color="#7F7F7F" size="30" @click="toHome" />
            </template>
            <!-- 右侧图标 -->
            <template #right>
              <van-icon name="search" size="30" color="#7F7F7F" style="margin-right:15px" @click="toSearch" />
              <van-icon name="cart-o" color="#7F7F7F" size="30" @click="toShopCar" />
            </template>
          </van-nav-bar>
        </div>
      </div>
    </div>
    <!-- 轮播 -->
    <!-- 背景 -->
    <div class="header-bc">
      <div class="title">
        <van-image width="80" height="40" src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" />
        <div class="header">严选好物，用心生活</div>
      </div>
      <div class="swiper">
        <van-swipe indicator-color="red" width="88.75" height="260" :loop="false">
          <van-swipe-item v-for="(item, index) in tarr" :key="index">
            <div v-for="item1 in item" :key="item1.id">
              <van-image :src="item1.picUrl" v-lazy="item1.picUrl" />
              <div class="swiper-t1">{{ item1.mainTitle }}</div>
              <div class="swiper-t2">{{ item1.viceTitle }}</div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 瀑布 -->
    <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
      <div v-masonry class="container" transition-duration="0.3s" item-selector=".item" gutter="1">
        <div v-masonry-tile class="waterfall-item item" v-for="(item, index) in waterfall" :key="item.topicId">
          <van-image :src="item.picUrl" v-lazy="item.picUrl"
            loading-icon="https://i03piccdn.sogoucdn.com/12412e92f37d0ff8" icon-size="160px" />

          <a v-if="(index + 1) % 7 == 0" style="
                   {
                    width: 20px;
                  }
                " :href="item.lookPics[0].videoUrl">
            <van-icon class="play" name="play-circle-o" v-show="(index + 1) % 7 == 0">
            </van-icon>
          </a>

          <div class="item-center">{{ item.title }}</div>
          <div class="item-bottom">
            <div class="bottom-left">
              <van-image class="bottom-img1" :src="item.avatar" v-lazy="item.avatar"
                loading-icon="https://i04piccdn.sogoucdn.com/7b2797533ee397a4" />
              <div class="bottom-title">{{ item.nickname }}</div>
            </div>
            <div class="bottom-right">
              <van-image class="bottom-img2" src="	https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" />
              <div class="bottom-wtach">
                {{
                  item.readCount / 10000 > 1
                  ? Math.round(item.readCount / 1000) + "k"
                  : item.readCount
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Valuable'
})
</script>
<script lang="ts" setup>
//  import {valuableStore} from '@/stores/Valuable/valuable'
import { getListData, getShopListData } from '@/api/Valuable/valuable';
import { watchEffect, onMounted, ref } from 'vue'
// import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import type {
  valuAbleModel,
  WaterfallListModel,
  WaterfallModel,
} from '@/api/Valuable/model/valuableM'
const router = useRouter();
//  const {ValuableData} =storeToRefs(valuables)
// 初始化数据(定义的数据)
// 第一个数组
const farr = ref<valuAbleModel[]>([]);
// console.log(farr);
// 第二个数组
const sarr = ref<valuAbleModel[]>([]);
// 第三个数组(为了把两个数组合并)
const tarr = ref<valuAbleModel[]>([]);
// 瀑布流的数据
const waterfall = ref<any>([]);
// 初始页面
const page = ref<number>(1);
// 每页显示条数
const pageSize = ref<number>(2);
//.是否已加载完成，加载完成后不再触发 load 事件
const loading = ref<boolean>(false);
// 是否处于加载状态，加载过程中不触发 load 事件
const finished = ref<boolean>(false);
// 9.定时器
const timer: any = null;

// 逻辑
// 跳转到首页
const toHome = () => {
  router.push({
    path: "/index",
  });
};
// 跳转到搜索
const toSearch = () => {
  router.push('/search')
}
// 跳转到购物车
const toShopCar = () => {
  router.push({
    path: "/item/cart",
  });
};
// 请求处理函数
const getValuableList = async () => {
  // 获取轮播的数据
  let res: any = await getListData();
  // console.log(res);

  // 把获取的数据先存到第一个数组
  farr.value = res.navList;
  // 数组2截取七个数据保存
  sarr.value = res.navList.splice(0, 7);
  sarr.value.forEach((item: any, index: number) => {
    // 把数组1和数组2合并为一个新数据
    let newArr: valuAbleModel = [item, farr.value[index]];
    // 然后加到到第三个数组中
    tarr.value.push(newArr);
  });
}

// 页面挂载完后运行
onMounted(() => {
  getValuableList()
});

// 4.监听page发送改变，发送请求，累加数据
watchEffect(async () => {
  let res: any = await getShopListData(page.value, pageSize.value);
  waterfall.value = [
    ...waterfall.value,
    ...res.result[0].topics.flat(1),
    res.result[0].look,
    ...res.result[1].topics.flat(1),
    res.result[1].look,
  ];

  if (!res.hasMore) {
    finished.value = true;
  }
});

//相当于刷新获取新数据
let onLoad = () => {
  clearTimeout(timer);
  setTimeout(() => {
    page.value += 1;
    loading.value = false;
  }, 1000);
};
</script>

<style lang="less" scoped>
// 主页高度
// 轮播样式
.header-bc {
  height: 330px;
  background: url("../../assets/valuableimage/1.jpg") no-repeat;
  background-size: 100% 200px;
  overflow: hidden;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 15px;

  .title {
    display: flex;
    margin-top: 28px;

    .header {
      font-size: 15px;
      color: white;
      margin-top: 15px;
    }
  }

  .swiper {
    margin-top: 10px;
    height: 250px;
    background-color: white;
    border-radius: 10px;
    font-size: 16px;

    .van-swipe {
      .van-swipe__track {
        .van-swipe-item {
          display: flex;
          flex-direction: column;
          text-align: center;

          .van-image {
            width: 60px;
            height: 60px;
            margin-top: 10px;
          }

          .swiper-t1 {
            font-size: 14px;
            font-weight: 700;
          }

          .swiper-t2 {
            margin-top: 3px;
            font-size: 10px;
            color: rgb(172, 166, 166);
          }
        }
      }

      :deep(.van-swipe__indicator) {
        width: 20px;
        height: 1px;
        margin: 0;
        background-color: rgb(142, 136, 136);
      }

      :deep(.van-swipe__indicator:nth-child(5)) {
        display: none;
      }

      :deep(.van-swipe__indicator:nth-child(6)) {
        display: none;
      }

      :deep(.van-swipe__indicator:nth-child(7)) {
        display: none;
      }
    }
  }
}

// 瀑布流
.container {
  width: 100%;

  .waterfall-item {
    position: relative;
    margin-left: 10px;
    width: 46%;
    margin-bottom: 12px;
    background-color: white;
    border-radius: 8px;

    :deep(.van-image__img) {
      border-radius: 8px 8px 0 0;
      width: 100%;
      position: relative;
    }

    .play {
      position: absolute;
      font-size: 50px;
      top: 30%;
      left: 60px;
      color: aliceblue;
    }

    .item-center {
      font-size: 13px;
      margin: 6px 0 15px 8px;
    }

    .item-bottom {
      width: 90%;
      margin-left: 10px;
      padding-bottom: 7px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      height: 20px;

      .bottom-left {
        display: flex;

        .bottom-img1 {
          :deep(.van-image__img) {
            width: 18px;
            height: 18px;
            border-radius: 50%;
          }
        }

        .bottom-title {
          font-size: 10px;
          line-height: 20px;
          margin-left: 5px;
          color: grey;
        }
      }

      .bottom-right {
        display: flex;

        .bottom-img2 {
          margin-top: 4px;
          width: 16px;
          height: 15px;
        }

        .bottom-wtach {
          font-size: 10px;
          line-height: 24px;
          color: grey;
        }
      }
    }
  }
}
</style>
